---
import config from "virtual:apostrophe-config";

const { title, bodyClass, aposData } = Astro.props;
const { viewTransitionWorkaround } = config;
const cacheBuster = viewTransitionWorkaround
  ? `?cb=${new Date().getTime()}`
  : "";

let bundlesCss = "";
let bundlesJs = "";

if (aposData.bundleMarkup) {
  bundlesCss =
    aposData.bundleMarkup.css
      ?.map((bundle) => bundle.replace(/\.css$/, ".css" + cacheBuster))
      .join("") ?? "";

  bundlesJs =
    aposData.bundleMarkup.js
      ?.map((bundle) => bundle.replace(/\.js$/, ".js" + cacheBuster))
      .join("") ?? "";
} else {
  bundlesJs = `<script src="${aposData.aposBodyData?.assetBaseUrl ?? ""}/apos-module-bundle.js${cacheBuster}"></script>`;
}
---

<!doctype html>
<html lang={aposData.locale}>
  <head>
    <slot name="startHead" />
    <Fragment set:html={bundlesCss} is:inline />
    <Fragment set:html={aposData.prependHead} is:inline />
    <title>{title}</title>
    <slot name="standardHead" />
    <Fragment set:html={aposData.appendHead} is:inline />
    <slot name="extraHead" />
  </head>
  <body
    data-apos-generated
    class={bodyClass}
    data-apos={JSON.stringify(aposData.aposBodyData)}
  >
    <Fragment set:html={aposData.prependBody} is:inline />
    <slot name="startBody" />
    <div id="apos-busy"></div>
    <div id="apos-admin-bar"></div>
    <div id="apos-notification"></div>

    <div data-apos-refreshable>
      <slot name="beforeMain" />
      <Fragment set:html={aposData.prependMain} is:inline />
      <slot name="main" />
      <Fragment set:html={aposData.appendMain} is:inline />
      <slot name="afterMain" />
    </div>

    <Fragment set:html={aposData.appendBody} is:inline />

    <div id="apos-modals"></div>
    <div id="apos-command-menu"></div>

    <Fragment set:html={bundlesJs} is:inline />
    <slot name="endBody" />
  </body>
</html>
